"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiFetch, pageApi } from "@/lib/api";
import { useAuth } from "@/hooks/use-auth";
import { useWorkspace } from "@/hooks/use-workspace";
import { toast } from "@/stores/ui-store";
import { Field, Input } from "@/components/ui/form";
import { PERM_LEVELS, type ShareLevel } from "@/lib/constants";
import type { WorkspaceRole } from "@/lib/types";

const LEVEL_OPTIONS: { value: ShareLevel; label: string; description: string }[] = [
  { value: "view", label: "Can view", description: "Read-only access to this page." },
  { value: "edit", label: "Can edit", description: "Can edit this page and its sub-pages." },
  { value: "public", label: "Anyone with the link", description: "No sign-in required." }
];

/**
 * /w/:workspace/page/:id/share — page sharing surface (route form of the
 * share dialog): public link + permission level + invite by email.
 */
export default function PageShareRoute() {
  const params = useParams<{ id: string; workspace: string }>();
  const pageId = params?.id ?? "";
  const slugOrId = params?.workspace ?? "";
  const router = useRouter();
  const qc = useQueryClient();
  const { user } = useAuth();
  const wsQuery = useWorkspace(slugOrId);

  // TASK-0133 — the org policy's guest-public-share gate (the member-facing
  // effective endpoint, never authoritative). Shown as a notice when the org
  // blocks "Anyone with the link"; the API is the enforcement (403).
  const effectivePolicy = useQuery({
    queryKey: ["workspaces", wsQuery.data?.id, "policy", "effective"],
    queryFn: async () => {
      const res = await apiFetch<{ policy: { disableGuestPublicShare?: boolean } }>(
        `/workspaces/${wsQuery.data?.id}/policy/effective`
      );
      return res.policy;
    },
    enabled: Boolean(wsQuery.data?.id),
    retry: false
  });
  const guestPublicBlocked = effectivePolicy.data?.disableGuestPublicShare === true;

  // The page share offers the three LINK levels the endpoint accepts
// (member roles comment/full_edit are not link levels — see ShareLevel).
const [level, setLevel] = useState<"view" | "edit" | "public">("view");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<WorkspaceRole>("member");
  const [copied, setCopied] = useState(false);

  const share = useQuery({
    queryKey: ["pages", pageId, "share"],
    queryFn: async () => {
      try {
        return await pageApi.share(pageId, { level: "view" });
      } catch {
        // No share link yet → the mutation below creates one.
        return null;
      }
    },
    enabled: Boolean(pageId),
    retry: false
  });

  const saveShare = useMutation({
    mutationFn: (input: { level: "view" | "edit" | "public" }) =>
      pageApi.share(pageId, input),
    onSuccess: (data) => {
      qc.setQueryData(["pages", pageId, "share"], data);
    }
  });

  const invite = useMutation({
    mutationFn: (input: { email: string; role: WorkspaceRole }) =>
      apiFetch<{ ok: true }>(`/pages/${pageId}/invites`, { method: "POST", body: input })
  });

  const shareUrl = share.data?.url ?? (pageId ? `${typeof window !== "undefined" ? window.location.origin : ""}/f/${pageId}` : "");

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast("error", "Copy failed", "Select the link text and copy manually.");
    }
  };

  return (
    <div className="mx-auto max-w-lg px-6 py-10">
      <button
        type="button"
        onClick={() => router.back()}
        className="mb-6 text-sm text-muted-foreground hover:text-foreground"
      >
        ← Back to page
      </button>
      <h1 className="text-xl font-semibold">Share</h1>
      <p className="mt-1 text-sm text-muted-foreground">Control who can access this page.</p>

      <div className="mt-6 space-y-6">
        <section className="space-y-3">
          <h2 className="text-sm font-medium">Public link</h2>
          <div className="flex gap-2">
            <Input readOnly value={shareUrl} className="flex-1 text-muted-foreground" aria-label="Share link" />
            <button
              type="button"
              onClick={copyLink}
              className="shrink-0 rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent"
            >
              {copied ? "Copied" : "Copy link"}
            </button>
          </div>
          {guestPublicBlocked && (
            <p
              data-testid="guest-public-share-notice"
              className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive"
            >
              Your organization has disabled public (guest) sharing. “Anyone with the link” is not available —
              the server blocks it.
            </p>
          )}
          <div className="space-y-2" role="radiogroup" aria-label="Link permissions">
            {LEVEL_OPTIONS.map((opt) => {
              // `LEVEL_OPTIONS` is typed `ShareLevel` (member ladder + the
              // "public" guest link the endpoint also accepts);
              // compare through `string` to stay type-safe without widening the
              // page's (out-of-scope) type system.
              const value = opt.value as string;
              const blocked = guestPublicBlocked && value === "public";
              return (
                <label
                  key={value}
                  data-testid={value === "public" ? "share-level-public" : undefined}
                  className={
                    "flex items-start gap-3 rounded-md border border-border p-3 has-[:checked]:border-ring has-[:checked]:ring-1 has-[:checked]:ring-ring " +
                    (blocked ? "opacity-50" : "cursor-pointer")
                  }
                >
                  <input
                    type="radio"
                    name="share-level"
                    value={value}
                    checked={level === (opt.value as string)}
                    disabled={blocked}
                    onChange={() => setLevel(opt.value as "view" | "edit" | "public")}
                    className="mt-1"
                  />
                  <span>
                    <span className="block text-sm font-medium">
                      {opt.label}
                      {blocked && <span className="ml-1.5 text-xs text-destructive">(disabled by your org)</span>}
                    </span>
                    <span className="block text-xs text-muted-foreground">{opt.description}</span>
                  </span>
                </label>
              );
            })}
          </div>
          <button
            type="button"
            disabled={saveShare.isPending}
            onClick={() => void saveShare.mutate({ level })}
            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
          >
            {saveShare.isPending ? "Saving…" : "Save link settings"}
          </button>
        </section>

        <section className="space-y-3">
          <h2 className="text-sm font-medium">Invite people</h2>
          <Field label="Email" htmlFor="invite-email" hint={`You are invited as ${user?.email ?? "a member"}.`}>
            <Input
              id="invite-email"
              type="email"
              placeholder="teammate@company.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </Field>
          <div className="flex gap-2">
            <select
              value={role}
              onChange={(e) => setRole(e.target.value as WorkspaceRole)}
              aria-label="Invite role"
              className="h-9 rounded-md border border-input bg-background px-2 text-sm"
            >
              <option value="viewer">Can view</option>
              <option value="commenter">Can comment</option>
              <option value="member">Can edit</option>
            </select>
            <button
              type="button"
              disabled={!email.trim() || invite.isPending}
              onClick={() =>
                invite.mutate({ email: email.trim(), role }, {
                  onSuccess: () => {
                    toast("success", "Invitation sent", email.trim());
                    setEmail("");
                  }
                })
              }
              className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
            >
              {invite.isPending ? "Sending…" : "Send invite"}
            </button>
          </div>
        </section>

        <p className="text-xs text-muted-foreground">
          {PERM_LEVELS.length} permission levels are enforced server-side — the frontend only
          renders what your role allows (never the source of truth).
        </p>
      </div>
    </div>
  );
}